<!-- 空教室查询 -->

<template>
  <div>
    <!-- 空教室查询 -->
    <el-select
        v-model="teachbuild.value"
        placeholder="请选择教学楼"
        @change="selectTeachbuild"
        clearable
        class="select-t"
    >
      <el-option
          v-for="item in teachbuild"
          :key="item.value"
          :label="item.label"
          :value="item.value"
      ></el-option>
    </el-select>

    <!-- 数据显示 -->
    <el-table :data="classroomData" style="height: 600px" size="mini" :stripe="true" :highlight-current-row="true">
      <el-table-column label="序号" type="selection"></el-table-column>
      <el-table-column prop="classroomNo" label="教室编号"></el-table-column>
      <el-table-column prop="classroomName" label="教室名"></el-table-column>
      <el-table-column prop="teachbuildNo" label="所属教学楼"></el-table-column>
      <el-table-column prop="capacity" label="容量"></el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
      <el-table-column v-if="user===undefined" prop="operation" label="操作">
        <template #default="scope">
          <el-button type="success" size="mini" @click="order(scope.$index, scope.row)">预约</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <!-- <div class="footer-button">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div> -->
  </div>
</template>

<script setup>
import {ref, onMounted, getCurrentInstance} from 'vue';
import {useRouter} from 'vue-router';
import {useStore} from 'vuex';

const {proxy} = getCurrentInstance();
const store = useStore();
const router = useRouter();
const user = window.localStorage.getItem('student') || undefined;
const teachbuild = ref([
  {
    value: "",
    label: ""
  }
]);
const classroomData = ref([]);
const teachbuildNo = ref('');
const pageSize = ref(10);
const page = ref(0);
const total = ref(0);

onMounted(() => {
  queryTeachbuild();
});

function selectTeachbuild() {
  teachbuildNo.value = teachbuild.value.value;

  queryByNo(teachbuildNo.value);
}

function order(index, row) {
  setTimeout(() => {
    ElMessage({message: "预约成功", type: "success"});
  }, 1000);
}

// 根据教学楼编号查询空教室
const queryByNo = async (teachbuildNo) => {
  const result = await proxy.$api.emptyClassroom(teachbuildNo)
  console.log(result);
  classroomData.value = result;
  total.value = classroomData.length;
}

// 查询所有教学楼
const queryTeachbuild = async () => {
  const result = await proxy.$api.teachbuildinfoList();
  teachbuild.value = result.map(v => ({value: v.teachBuildNo, label: v.teachBuildName}));
}
</script>

<style lang="less" scoped>
.select-t {
  text-align: left;
  float: left;
  margin-bottom: 5px;
}

.footer-button {
  margin-top: 10px;
}
</style>